<template>
  <!-- 排行榜模块 -->
  <div class="mod-tls">
    <div class="container">
      <div class="tls-nav">
        <h2>特色榜</h2>
        <ul class="tls-nav-ul clearfix" v-if="toplista">
          <li
            @click="showBang(index)"
            :class="[
              'tls-nav-li',
              { 'tls-nav-li-current': index == currentLi },
            ]"
            v-for="(item, index) in toplista"
            :key="index"
          >
            <div class="tls-nav-li-item">
              <div class="left">
                <a href="javascript:;">
                  <img :src="item.coverImgUrl" :alt="item.name" />
                </a>
              </div>
              <p class="item-name">
                <a href="javascript:;">{{ item.name }}</a>
              </p>
              <p class="item-tips">{{ item.updateFrequency }}</p>
            </div>
          </li>
        </ul>
        <h2>全球媒体榜</h2>
        <ul class="tls-nav-ul clearfix" v-if="toplistb">
          <li
            @click="showBang(index + 4)"
            :class="[
              'tls-nav-li',
              { 'tls-nav-li-current': index + 4 == currentLi },
            ]"
            v-for="(item, index) in toplistb"
            :key="index"
          >
            <div class="tls-nav-li-item">
              <div class="left">
                <a href="javascript:;">
                  <img :src="item.coverImgUrl" :alt="item.name" />
                </a>
              </div>
              <p class="item-name">
                <a href="javascript:;">{{ item.name }}</a>
              </p>
              <p class="item-tips">{{ item.updateFrequency }}</p>
            </div>
          </li>
        </ul>
      </div>
      <!-- 先加个判断，toplists[0]有数据后再渲染，不然会报错 -->
      <div class="tls-main" v-if="toplists[bl]">
        <div class="tls-hd">
          <h2 class="tls-title" @click.stop="showDes = !showDes">
            {{ toplists[bl].name }}
          </h2>
          <span class="tls-date">
            <span class="date-time">{{
              toplists[bl].trackUpdateTime | showDate
            }}</span>
            <span class="date-fre">({{ toplists[bl].updateFrequency }})</span>
          </span>
          <div class="tls-description" v-show="showDes">
            {{ toplists[bl].description }}
          </div>
        </div>
        <div class="mod-songlist-toolbar">
          <a class="mod-btn-blue">
            <span class="btn-play" @click="playAll">
              <i class="iconfont">&#xe8a8;</i>
              全部播放
            </span>
            <span class="btn-add">
              <i class="iconfont" @click="addAll">&#xe603;</i>
            </span>
          </a>
          <a class="mod-btn" @click="colPlaylist">
            <i class="iconfont">&#xe8c8;</i>
            收藏
          </a>
          <a class="mod-btn">
            <i class="iconfont">&#xe8a6;</i>
            下载
          </a>
          <a class="mod-btn">
            <i class="iconfont">&#xe8a9;</i>
            批量操作
          </a>
          <a class="mod-btn">
            <i class="iconfont">&#xe8a7;</i>
            评论（{{ commentData.total }}）
          </a>
        </div>
        <div class="songlist-message">
          <h3>歌曲列表</h3>
          <span class="songlist-num">{{ songs.length }}首歌</span>
          <span class="songlist-play"
            >播放：<span class="playcount">{{ playCount }}</span
            >次</span
          >
        </div>
        <song-list :songs="songs"></song-list>
        <div class="playlistmore">
          <a href="javascript:;" @click="clickPlaylistDetail(toplists[bl].id)"
            >查看更多</a
          >
        </div>
        <!-- 超过1000条评论后需要用到before参数，传上一个分页最后一条评论的time -->
        <comment ref="comment" :commentData="commentData"></comment>
        <div class="comment-el-pagination" v-if="commentData.total > 20">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="20"
            layout="prev, pager, next, jumper"
            :total="commentData.total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <small-tip :tipMessage="smallTipMsg" v-if="showSmallTip"></small-tip>
  </div>
</template>

<script>
import { formatDate } from "common/date.js";
import SongList from "views/toplists/child/SongList.vue";
import Comment from "views/toplists/child/Comment.vue";
import SmallTip from "components/tip/SmallTip";

export default {
  name: "TopLists",
  components: {
    SongList,
    Comment,
    SmallTip,
  },
  data() {
    return {
      // 所有榜
      toplists: [],
      // 特色榜
      toplista: [],
      // 全球媒体榜
      toplistb: [],
      // 记录点击的榜单序号
      bl: 0,
      // 显示介绍
      showDes: false,
      songs: [],
      commentData: {},
      currentPage: 1,
      playCount: 0,
      currentLi: 0,
      showSmallTip: false,
      smallTipMsg: "操作提示",
    };
  },
  filters: {
    // 过滤器转换时间戳
    showDate(value) {
      const date = new Date(value);
      return formatDate(date, "yyyy-MM-dd");
    },
  },
  mounted() {
    this.getTopList();
    // if (this.toplists) {
    //   this.showBang(0);
    // }
    // this.getSongList();
    // this.getComment();
    // 点击外部时隐藏description
    document.addEventListener("click", (e) => {
      if (e.target.className !== "tls-title") {
        this.showDes = false;
      }
    });
  },
  updated() {
    // if (this.toplists) {
    //   this.showBang(0);
    // }
    // console.log(this.$refs.comment.$el.offsetTop);
    // console.log(this.$refs.comment);
  },
  methods: {
    colPlaylist() {
      // 收藏歌单
      if (this.$store.state.isLogin) {
        // 已登录
        this.axios({
          url: "/playlist/subscribe?t=1&id=" + this.toplists[this.bl].id,
        })
          .then((res) => {
            if (res.data.code == 200) {
              this.smallTipMsg = "收藏歌单成功！";
              this.showSmallTip = true;
              setTimeout(() => {
                this.showSmallTip = false;
              }, 1000);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.smallTipMsg = "请登录后再收藏歌单";
        this.showSmallTip = true;
        setTimeout(() => {
          this.showSmallTip = false;
        }, 1000);
      }
    },
    playAll() {
      if (this.songs.length != 0) {
        var newItem = [];
        this.songs.forEach((item) => {
          newItem[newItem.length] = {
            id: item.id,
            name: item.name,
            ar: item.ar,
            al: item.al,
            mv: item.mv,
            dt: item.dt,
            fee: item.fee,
          };
        });
        this.playSongs(newItem, true);
      }
    },
    addAll() {
      if (this.songs.length != 0) {
        var newItem = [];
        this.songs.forEach((item) => {
          newItem[newItem.length] = {
            id: item.id,
            name: item.name,
            ar: item.ar,
            al: item.al,
            mv: item.mv,
            dt: item.dt,
            fee: item.fee,
          };
        });
        console.log(newItem);
        this.addSongs(newItem, true);
      }
    },
    clickPlaylistDetail(id) {
      this.playPlaylistDetail(id);
      document.documentElement.scrollTo({ top: 0, behavior: "smooth" });
    },
    showBang(index) {
      this.currentLi = index;
      // 点击榜单，重新加载榜单的数据
      this.bl = index;
      this.currentPage = 1;
      this.getComment();
      this.getSongList();
      document.documentElement.scrollTo({ top: 141, behavior: "smooth" });
    },
    handleCurrentChange() {
      this.getComment();
      // 点击分页后，滚动到评论的头部，141为页面头部组件的高度
      document.documentElement.scrollTo({
        top: this.$refs.comment.$el.offsetTop + 141,
        behavior: "smooth",
      });
    },
    getComment() {
      this.axios({
        /* 歌单评论接口地址 */
        url:
          "/comment/playlist?id=" +
          this.toplists[this.bl].id +
          "&offset=" +
          (this.currentPage - 1) * 20,
      })
        .then((res) => {
          this.commentData = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getSongList() {
      this.axios({
        /* 排行榜接口地址 */
        url:
          "/playlist/track/all?id=" + this.toplists[this.bl].id + "&limit=20",
      })
        .then((res) => {
          this.songs = res.data.songs;
          this.playCount = this.toplists[this.bl].playCount;
          console.log(this.songs);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getTopList() {
      this.axios({
        /* 排行榜接口地址 */
        url: "/toplist",
      })
        .then((res) => {
          // 截取前四个进行分组
          this.toplists = res.data.list;
          this.toplista = res.data.list.slice(0, 4);
          this.toplistb = res.data.list.slice(4);
          this.bl = 0;
          this.getComment();
          this.getSongList();
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
.mod-tls {
  padding-top: 50px;
  background-color: var(--color-theme-light-5);
}
.tls-nav {
  width: 240px;
  float: left;
  border: 1px solid #ccc;
}
.tls-nav h2 {
  font-size: 16px;
  color: #000;
  padding: 20px 0 10px 20px;
}
.tls-nav ul * {
  cursor: pointer;
  vertical-align: middle;
}
.tls-nav-li {
  padding: 10px 0 10px 20px;
}
.tls-nav-li-current {
  background-color: rgba(255, 255, 255, 0.7);
}
.tls-nav-li-item {
  margin-left: 50px;
  height: 40px;
}
.tls-nav-li-item .left {
  display: inline;
  margin-left: -50px;
  overflow: hidden;
  width: 40px;
}
.tls-nav-li-item .left a {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
}
.tls-nav-li-item .left a img {
  width: 40px;
  height: 40px;
}
.tls-nav-li-item .item-name {
  margin: 3px 0 8px;
  overflow: hidden;
  font-size: 13px;
}
.tls-nav-li-item .item-name a {
  white-space: nowrap;
}
.item-tips {
  font-size: 12px;
  color: #999;
}
/* tls-main */
.tls-main {
  position: relative;
  margin-left: 280px;
}

.tls-hd {
  position: relative;
  height: 64px;
  line-height: 64px;
}
.tls-hd .tls-title {
  float: left;
  font-weight: 400;
  font-size: 30px;
  margin-right: 15px;
  cursor: pointer;
}
.tls-title:hover {
  color: var(--color-theme);
}
.tls-date span {
  font-size: 14px;
  margin-right: 5px;
}
.tls-date .date-fre {
  color: #999;
}
.tls-description {
  position: relative;
  padding: 12px 20px;
  width: 500px;
  font-size: 16px;
  line-height: 28px;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.2);
  z-index: 2;
}
.tls-description:before {
  content: "";
  position: absolute;
  top: -20px;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-bottom: 10px solid #fff;
}
.mod-tls .mod-songlist-toolbar {
  position: relative;
  margin-bottom: 20px;
}

.songlist-message {
  height: 50px;
  line-height: 50px;
}
.songlist-message h3 {
  float: left;
  font-weight: 400;
  margin-right: 15px;
}
.songlist-message .songlist-num {
  font-size: 14px;
  color: #999;
}
.songlist-message .songlist-play {
  float: right;
  margin-right: 20px;
  font-size: 14px;
}
.songlist-message .songlist-play .playcount {
  color: var(--color-theme);
}
.comment-el-pagination {
  position: relative;
  text-align: center;
  margin: 20px auto;
}
.playlistmore {
  margin-bottom: 20px;
  margin-top: -20px;
  text-align: center;
  height: 30px;
  line-height: 30px;
  font-size: 20px;
}
.playlistmore a:hover {
  color: var(--color-theme);
}
</style>